﻿@using System.Collections.ObjectModel
@using MvcApp.SlickExt
@using SlickGridNet;
@model IList<MvcApp.Models.Calculation>

@{
	ViewBag.Title = "SlickGrid.Net";
}
@section HeaderIncludes
{
	<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/slick-default-theme.css")" />
	<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/slick.grid.css")" />
}

<h2>SlickGrid.Net</h2>

@section scripts
{
	@Scripts.Render("~/bundles/slickgrid")

	@{
		var slickGrid = new SlickGrid("grid", "#grid",
			new SlickOptions {EnableColumnReorder = false, EnableCellNavigation = true, AutoHeight = true, Editable = true},
			new Collection<SlickColumn>
			{
				new SlickColumn("Name", "name", "Name"),
				new SlickColumn("Mnemonic", "mnemonic", "Mnemonic"),
				new DropDownListColumn("Data type", "datatype", "DatatypeId")
				{
					Editor = new Slick.Editors.DropDownListEditor(),
					Formatter = new Slick.Formatters.DropDownListFormatter(),
					DropDownListOptions = ExplicitString.Create("datatypes")
				},
				new SlickColumn("Clause", "clause", "Clause")
			}) {DataName = "data", Data = Model};
	}
	<script type="text/javascript" language="javascript">
		var datatypes = @Html.Raw(ViewBag.Datatypes);
	</script>

	@*@MvcHtmlString.Create(slickGrid.Render())*@

	@MvcHtmlString.Create(slickGrid.RenderIncludes())
	<script type="text/javascript" language="javascript">

		var data = @Html.Raw(ViewBag.CalcData);

		var columns = @MvcHtmlString.Create(slickGrid.RenderColumns());

		var options = @MvcHtmlString.Create(slickGrid.RenderOptions());

		var grid;
		$(function() {
			grid = new Slick.Grid("#grid", data, columns, options);
		});

	</script>
}

<div>Table initialised <b>with</b> SlickGrid.Net</div><br />
<div id="grid"></div>
<div style="clear: both;"></div>


